<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="标题" prop="title">
      <el-input v-model="ruleForm.title" placeholder="标题"></el-input>
    </el-form-item>

    <el-form-item label="活动" prop="name">
      <el-input v-model="ruleForm.name" placeholder="输入活动关键字">
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="$emit('choiseAc', ruleForm.name)"></el-button>
      </el-input>
      <div>{{ item.title }}</div>
    </el-form-item>

    <el-form-item label="图片" prop="image">
      <div class="image-btn">
        <img v-if='imageUrl.path' :src="imageUrl.path" alt="">
        <i v-else class="el-icon-plus"></i>
        <input class="if" type="file" accept="image/*" @change="imageChange">
      </div>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">添加广告</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      cropper: false,
      ruleForm: {
        title: '',
        name: '',
        image: ''
      },
      image: '',
      rules: {
        title: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        name: [{ required: true, message: '请选择活动', trigger: 'blur' }]
      }
    }
  },
  props: {
    imageUrl: {
      type: Object,
      default() {
        return {
          name: '',
          path: ''
        }
      }
    },
    item: Object
  },
  methods: {
    /* setParams(params) {
      this.ruleForm['title'] = params.title
      this.ruleForm['name'] = params.name
      this.item['title'] = params.title
    }, */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.ruleForm)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    imageChange(event) {
      console.log(event)
      this.$emit('change', event.target.files[0])
    }
  }
}
</script>

<style scoped='true'>
.image-btn {
  width: 160px;
  height: 90px;
  line-height: 105px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.image-btn:hover, .image-btn .if:hover { border-color: #409EFF; }
.image-btn .el-icon-plus {
  font-size: 28px;
  color: #8c939d;
}
.image-btn .if {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; opacity: 0; cursor: pointer;
}
img { max-width: 100%; }
</style>
